Multimedia

Tabellen

Doelstelling

Een tabel is een middel waarmee van gegevens in rijen en kolommen worden geordend. Het gebruik van tabellen is alomtegenwoordig in communicatie, onderzoek en data-analyse. Tabellen worden o.a. gebruikt in de gedrukte media, handgeschreven notities, computer software. Voorbeelden van tabellen zijn financiële verslagen, uitzendschema’s en sportuitslagen, prijslijsten.

1. Na deze les ben je in staat om gegevens in tabelvorm, namelijk rijen en kolommen, in HTML voor te stellen.
2. Na deze les weet je hoe je tabellen met CSS opmaakt. Je leert hoe je:
   1. cellen voorziet van opvulling: als de tekst in een tabelcel de rand of een andere cel raakt, is de tekst niet goed leesbaar. Voeg opvulling toe en de leesbaarheid verbetert;
   2. koppen onderscheidt van de andere cellen: alle tabelkoppen vet maken (de standaardstijl voor het element <th>) maakt het gemakkelijker om te tabel in één oogopslag te lezen. Je kunt ze ook in hoofdletters zetten en ze een achtergrondkleur geven of ze onderstrepen om ze duidelijk van de inhoud te onderscheiden;
   3. even en oneven rijen en kolommen een andere kleur geeft: rijen om en om kleuren helpt de gebruiker de rijen te volgen. Gebruik een kleur die subtiel afwijkt van de andere rijen zodat de tabel er als één geheel blijft uitzien;
   4. getallen rechtsuitlijnt: je kunt de eigenschap textalign gebruiken om de inhoud van een kolom die getallen bevat rechts uit te lijnen, zodat grote getallen duidelijk onderscheiden worden van kleinere. Op die manier volg je de wiskundige manier van getallen schrijven;
   5. een rollover effect maakt;

Leerpad

1. HTML
   1. Wat is een tabel?
   2. De HTML structuur van een tabel
   3. De basisstructuur van een tabel
   4. Tabelkoppen
   5. Tabel titel en bijschrift
   6. Semantische tabellen
   7. Toegankelijkheid met scope
   8. Cellen samenvoegen
   9. Het col element
2. CSS
   1. :nth-child selector
   2. border-radius eigenschap
   3. Standaard tabelopmaak
   4. CSS opmaak voor tabellen
   5. Tabel- en celranden
   6. Rijen met alternerende achtergrondkleur
   7. Kolommen met alternerende achtergrondkleur
   8. Rollover effect

Opdracht

1. Maak een submap met de naam tabellen.
2. De HTML plaats je in een bestand met de naam tabel.html.
3. De CSS plaats je in een bestand met de naam tabel.css in de submap met de naam css.
4. Schrijf HTML en CSS om het volgende resultaat zo nauwkeurig mogelijk te bereiken. Gebruik zo veel mogelijk technieken die we tot nu toe gezien hebben.

   

5. Let op:
   1. ronde randen kolomkoppen;
   2. alternatieve kleur, eerste kolom;
   3. alternatieve kleur kolomkoppen;
   4. alternatieve kleur rijen;
   5. gecentreerde tekst of links uitgelijnd;
6. Maak de opdracht in Visual Studio Code op je lokale computer en kopiëer je de tabellen-map naar Cloud9.
7. Download deze map en stuur ze door via de link op Moodle.